<template>
	<view class='details'>
		<!-- 按钮分享 后期需要全局封装分享组件
				<view class="wx-nav">
				<view class="iconfont icon-magnifier wx-nav-lf" @tap=onBackPress()></view>
				<view class="wx-nav-zy">商品详情 </view>
				<view class=" wx-nav-lf">
				<button type="default" class="iconfont icon-magnifier" open-type="share"
				@click="onNavigationBar('share')">分享</button>
				</view>
				</view> 
		-->

		<!--商品图-->
		<swiper class="swipe_delit" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swipe_delit_img">
				<view class="swiper-item">
					<image class='swiper-img' :src="goodsContent.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!--价格和名称-->
		<view class='details-goods'>
			<view class='goods-pprice'>¥{{goodsContent.pprice}}</view>
			<view class='goods-oprice'>¥{{goodsContent.oprice}}</view>
			<view class='goods-name'>{{goodsContent.name}}</view>
		</view>
		<!--商品详情图-->
		<view>
			<view>
				<image class='details-img' src="../../static/img/detail1.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail2.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail3.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail4.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="../../static/img/detail5.jpg" mode=""></image>
			</view>
		</view>
		<!--商品列表-->
		<Card cardTitle='看了又看'></Card>
		<CommodityList :dataList='dataList'></CommodityList>

		<!--底部-->
		<view class='details-foot'>
			<view class='iconfont icon-xiaoxi'></view>
			<view class='iconfont icon-gouwuche' @tap='goShopCart'></view>
			<view class='add-shopcart' @tap='showPop'>加入购物车</view>
			<view class='purchase' @tap='showPop'>立即购买</view>
		</view>

		<!--底部弹出层-->

		<view class="pop" v-show='isShow' @touchmove.stop.prevent=''>
			<!--蒙层-->
			<view class='pop-mask' @tap='hidePop'></view>
			<!--内容块-->
			<view class='pop-box' :animation="animationData">
				<view>
					<image class='pop-img' :src="goodsContent.imgUrl" mode=""></image>
				</view>
				<view class='pop-num'>
					<view>购买数量</view>
					<UniNumberBox :min='minData' :value='num' @change='changeNumber()'></UniNumberBox>
				</view>
				<view class='pop-sub' @tap='addCart'>
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {
		mapMutations
	} from 'vuex'
	// import sharefrom from '@/utils/share.js'
	export default {
		data() {
			return {
				isShow: false,
				goodsContent: {},
				animationData: {},
				num: 1,
				minData: 1,
				swiperList: [{
						imgUrl: "../../static/img/details1.jpeg"
					},
					{
						imgUrl: "../../static/img/details2.jpeg"
					},
					{
						imgUrl: "../../static/img/details3.jpeg"
					}
				],
				dataList: [{
						id: 1,
						imgUrl: "../../static/img/commodity1.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 2,
						imgUrl: "../../static/img/commodity2.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 3,
						imgUrl: "../../static/img/commodity3.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 4,
						imgUrl: "../../static/img/commodity4.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					}
				]
			}
		},
		components: {
			Card,
			CommodityList,
			UniNumberBox
		},
		onLoad(e) {
			this.getData(e.id);
		},
		//修改返回默认行为  
		//'backbutton'——左上角导航栏按钮及安卓返回键；
		//'navigateBack'——uni.navigateBack() 方法。支付宝小程序端不支持返回此字段
		//详情参数 https://uniapp.dcloud.net.cn/tutorial/page.html#onbackpress
		//https://uniapp.dcloud.net.cn/tutorial/page.html#%E9%A1%B5%E9%9D%A2%E7%AE%80%E4%BB%8B
		onBackPress(obj) {
			console.log("onBackPress", obj);
			if (this.isShow) {
				this.hidePop();
				return true;
			}
		},
		//点击分享 监听原生标题栏按钮点击事件，参数为Object
		//按钮： https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
		//分享参数： https://uniapp.dcloud.net.cn/api/plugins/share.html
		//WXSceneSession	分享到聊天界面
		//WXSceneTimeline	分享到朋友圈
		//WXSceneFavorite	分享到微信收藏
		onNavigationBarButtonTap(e) {
			console.log("yan", e);
			this.onNavigationBar(e.type, "1")
		},


		methods: {
			...mapMutations('cart', ['addShopCart']),
			//改变商品数量
			changeNumber(value) {
				console.log("pmmmm", value);
				if (value) {
					this.num = value;
				}

			},
			//请求商品
			getData(id) {
				$http.request({
					url: "/goods/id",
					data: {
						id: id
					}
				}).then((res) => {
					this.goodsContent = res[0];
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			showPop() { //创建一个动画实例 https://uniapp.dcloud.net.cn/api/ui/animation.html#createanimation
				var animation = uni.createAnimation({
					duration: 200
				})
				animation.translateY(600).step();
				this.animationData = animation.export();
				this.isShow = true;
				setTimeout(() => {
					animation.translateY(0).step();
					this.animationData = animation.export();
				}, 200)

			},
			hidePop() {
				var animation = uni.createAnimation({
					duration: 200
				})
				animation.translateY(600).step();
				this.animationData = animation.export();
				this.isShow = true;
				setTimeout(() => {
					animation.translateY(0).step();
					this.isShow = false;
				}, 200)
			},
			//跳转到购物车页面
			goShopCart() {
				uni.navigateTo({
					url: '/pageshop/shopcart/shopcart'
				})
			},
			//加入购物车
			addCart() {
				console.log("num", this.num);
				$http.request({
					url: "/addCart",
					method: "POST",
					data: {
						goods_id: this.goodsContent.id,
						num: this.num
					},
					// header: {
					// 	token: true
					// }
				}).then((res) => {
					//隐藏弹出框
					this.hidePop();
					//提示信息
					uni.showToast({
						title: "成功加入购物车",
						icon: 'none'
					})
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			onNavigationBar(type, isshow = 0) { //自定义导航栏
				// sharefrom.onShareAppMessage(
				// 		{
				// 		"provider": "weixin",
				// 		"type": 0,
				// 		"scene": "WXSceneSession",
				// 		"title": this.goodsContent.name,
				// 		"href": "http://198.20.10.4:8080/#/pages/details/details?id=" + this.goodsContent.id + "",
				// 		"imageUrl": this.goodsContent.imgUrl			
				// 	}
				// )
				let isTom = true
				if (isshow) {
					isTom = false
					console.log("xxxxx", uni.canIUse('share'))
				}

				if (type === 'share') {
					uni.share({
						"provider": "weixin",
						"type": 0,
						"scene": "WXSceneSession",
						"title": this.goodsContent.name,
						"href": "http://198.20.10.4:8080/#/pages/details/details?id=" + this.goodsContent.id + "",
						imageUrl: this.goodsContent.imgUrl,
						success: function(res) {
							uni.showTabBar({
								title: "分享成功"
							})
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}

					})
				}
			}
		},

		// 微信小程序的分享
		onShareAppMessage() {
			return {
				"title": this.goodsContent.name, // 分享标题
				"path": "http: //172.20.10.4:8080/#/pages/details/details?id=" + this.goodsContent.id + "", // 分享路径，当前为首页
				"imageUrl": this.goodsContent.imgUrl, // 分享图片
			}
		},

		onShareTimeline() { // 分享到朋友圈
			return {
				"title": this.goodsContent.name, // 分享标题
				"path": "http: //172.20.10.4:8080/#/pages/details/details?id=" + this.goodsContent.id + "", // 分享路径，当前为首页
				"imageUrl": this.goodsContent.imgUrl, // 分享图片
			}
		},
		// 复制链接分享
		onShare() {
			uni.getClipboardData({
				success: function(res) {
					console.log(res.data);
				}
			});

			// const url = `https://www.xxx.com/#/${this.$route.path}` // 获取当前页面的链接
			const url = 'http: //172.20.10.4:8080/#/pages/details/details?id=" + this.goodsContent.id + ""'
			promisify(uni.setClipboardData)({
				data: url
			}).then(() => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			})
		}
	}
</script>
<style scoped>
	.details {
		padding-bottom: 90rpx;
	}

	.swipe_delit {
		width: 100%;
		height: 700rpx;
	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.details-goods {
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		padding: 10rpx 0;
	}

	.details-img {
		width: 100%;
	}

	.details-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.details-foot .iconfont {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		background-color: #000000;
		color: #FFFFFF;
		text-align: center;
		margin: 0 10rpx;
	}

	.add-shopcart {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.purchase {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.pop-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.pop-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}

	.pop-img {
		width: 260rpx;
		height: 260rpx;
	}

	.pop-num {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.pop-sub {
		line-height: 80rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		text-align: center;
	}

	/* 测试css */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.wx-nav {
		text-align: center;
		/* height: 200rpx; */
		width: 100%;
		height: var(--status-bar-height);
		line-height: 200rpx;
		display: flex;
		/*margin-top: 44rpx;*/
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.wx-nav-lf,
	.wx-nav-lr {
		font-size: 40rpx;
	}

	.wx-nav-zy {
		background: #FFFFFF;
		font-size: 30rpx;
	}




	/* 测试css */
</style>